<template>
  <div>
    <table border="1" rules="all">
      <caption>{{title}}</caption>
      <tr>
        <th>苹果{{price}}￥/斤，折扣（{{discount}}折）</th>
      </tr>
      <tr>
        <td>
          请输入购买的斤数：
          <input type="text" v-model="count" />
        </td>
      </tr>
      <tr>
        <td>
          <button @click="fn">结账买单~</button>
        </td>
      </tr>
      <tr>
        <td>结账单：总价：{{total}}￥元 折后价：{{zhj}}￥元 省了：{{total-zhj}}￥元</td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: "欢迎光临vue开发的收银系统水果店",
      price: 10,
      discount: 8,
      count: 0,
      total: 0,
      zhj: 0,
    };
  },
  methods: {
    fn() {
      this.total = this.price * this.count
      this.zhj = this.total * this.discount/10
    }
  },
  components: {},
};
</script>
  
<style scoped lang=less>
  table{
    width: 500px;
    margin: 0 auto;
    text-align: center;
    caption {
      font-weight: 700;
      margin-bottom: 8px;
    }
  } 
</style>
